<template>
  <div class="app-container">
    <!-- 搜索/过滤区域 -->
    <div class="search-container">
      <el-form :inline="true" :model="searchForm" size="small" class="search-form">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="请输入" clearable style="width: 150px;" />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="searchForm.employeeId" placeholder="请输入" clearable style="width: 150px;" />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="searchForm.phone" placeholder="请输入" clearable style="width: 150px;" />
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="searchForm.tag" placeholder="请选择" clearable style="width: 150px;">
            <el-option v-for="tag in nurseTagOptions" :key="tag.value" :label="tag.label" :value="tag.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-container">
      <el-button type="primary" @click="handleAdd">新增护士</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" v-loading="loading" style="width: 100%; margin-bottom: 20px;" border stripe>
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="employeeId" label="工号" width="120" />
      <el-table-column prop="phone" label="手机号码" width="130" />
      <el-table-column prop="tag" label="标签" width="320">
        <template slot-scope="scope">
          <el-tag v-for="tag in scope.row.tags" :key="tag" size="small" style="margin-right: 5px;">
            {{ tag }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark || '---' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)" class="operation-text">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)" class="operation-text">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C;"
            class="operation-text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pagination.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" background />
    </div>

    <!-- 新增/编辑护士对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleDialogClose">
      <el-form :model="nurseForm" :rules="rules" ref="nurseForm" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="nurseForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="工号" prop="employeeId">
          <el-input v-model="nurseForm.employeeId" placeholder="请输入工号" />
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="nurseForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="标签" prop="tags">
          <el-select v-model="nurseForm.tags" multiple placeholder="请选择标签" style="width: 100%;">
            <el-option v-for="tag in nurseTagOptions" :key="tag.value" :label="tag.label" :value="tag.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="nurseForm.remark" placeholder="请输入备注信息" :rows="3" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDialogClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看护士详情对话框 -->
    <el-dialog title="护士详情" :visible.sync="viewDialogVisible" width="500px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="姓名">{{ currentNurse.name }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ currentNurse.employeeId }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ currentNurse.phone }}</el-descriptions-item>
        <el-descriptions-item label="标签">
          <el-tag v-for="tag in currentNurse.tags" :key="tag" size="small" style="margin-right: 5px;">
            {{ tag }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ currentNurse.remark || '---' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'NurseManagement',
  data() {
    return {
      // 搜索表单
      searchForm: {
        name: '',
        employeeId: '',
        phone: '',
        tag: '',
        boundUser: ''
      },
      // 表格数据
      tableData: [
        {
          id: 1,
          name: '韩丽丽',
          employeeId: '001',
          phone: '183****4197',
          tags: ['态度热情', '专业性强', '耐心解答'],
          remark: '熟练各种护理操作'
        },
        {
          id: 2,
          name: '纪晓苒',
          employeeId: '002',
          phone: '135****9942',
          tags: ['耐心解答'],
          remark: '新生儿系列检测'
        },
        {
          id: 3,
          name: '张威',
          employeeId: '003',
          phone: '183****3407',
          tags: ['态度热情', '专业性强'],
          remark: '暂无描述'
        }
      ],
      // 加载状态
      loading: false,
      // 分页信息
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 3
      },
      // 对话框相关
      dialogVisible: false,
      viewDialogVisible: false,
      dialogTitle: '新增护士',
      submitLoading: false,
      // 护士表单
      nurseForm: {
        id: null,
        name: '',
        employeeId: '',
        phone: '',
        tags: [],
        boundUser: '',
        remark: ''
      },
      // 当前查看的护士
      currentNurse: {},
      // 护士标签选项
      nurseTagOptions: [
        { label: '态度热情', value: '态度热情' },
        { label: '专业性强', value: '专业性强' },
        { label: '耐心解答', value: '耐心解答' }
      ],
      // 表单验证规则
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        employeeId: [
          { required: true, message: '请输入工号', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请选择标签', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    // 重置搜索
    handleReset() {
      this.searchForm = {
        name: '',
        employeeId: '',
        phone: '',
        tag: '',
        boundUser: ''
      }
      this.handleSearch()
    },
    // 新增护士
    handleAdd() {
      this.dialogTitle = '新增护士'
      this.nurseForm = {
        id: null,
        name: '',
        employeeId: '',
        phone: '',
        tags: [],
        boundUser: '',
        remark: ''
      }
      this.dialogVisible = true
    },
    // 查看护士
    handleView(row) {
      this.currentNurse = { ...row }
      this.viewDialogVisible = true
    },
    // 编辑护士
    handleEdit(row) {
      this.dialogTitle = '编辑护士'
      this.nurseForm = { ...row }
      this.dialogVisible = true
    },
    // 删除护士
    handleDelete(row) {
      this.$confirm(`确定要删除护士"${row.name}"吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // deleteNurse(row.id).then(() => {
        //   this.$message.success('删除成功')
        //   this.loadData()
        // }).catch(() => {
        //   this.$message.error('删除失败')
        // })
      }).catch(() => {
        // 取消删除
      })
    },
    // 提交表单
    handleSubmit() {
      this.$refs.nurseForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true

          if (this.nurseForm.id) {
            // 编辑
            // updateNurse(this.nurseForm.id, this.nurseForm).then(() => {
            //   this.$message.success('编辑成功')
            //   this.submitLoading = false
            //   this.dialogVisible = false
            //   this.loadData()
            // }).catch(() => {
            //   this.submitLoading = false
            //   this.$message.error('编辑失败')
            // })
          } else {
            // 新增
            // addNurse(this.nurseForm).then(() => {
            //   this.$message.success('新增成功')
            //   this.submitLoading = false
            //   this.dialogVisible = false
            //   this.loadData()
            // }).catch(() => {
            //   this.submitLoading = false
            //   this.$message.error('新增失败')
            // })
          }
        }
      })
    },
    // 关闭对话框
    handleDialogClose() {
      this.dialogVisible = false
      this.$refs.nurseForm.resetFields()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },
    // 加载护士标签
    loadNurseTags() {
      // getNurseTags().then(res => {
      //   if (res && res.length > 0) {
      //     this.nurseTagOptions = res.map(tag => ({
      //       label: tag.name || tag.label,
      //       value: tag.value || tag.name || tag.label
      //     }))
      //   }
      // }).catch(() => {
      //   // 如果API调用失败，使用默认标签
      //   console.log('使用默认护士标签')
      // })
    },
    // 加载数据
    loadData() {
      // this.loading = true
      // const params = {
      //   page: this.pagination.currentPage - 1,
      //   size: this.pagination.pageSize,
      //   name: this.searchForm.name,
      //   employeeId: this.searchForm.employeeId,
      //   phone: this.searchForm.phone,
      //   tag: this.searchForm.tag,
      //   boundUser: this.searchForm.boundUser
      // }
      // getNurseList(params).then(res => {
      //   this.tableData = res.content || res
      //   this.pagination.total = res.totalElements || res.length || 0
      //   this.loading = false
      // }).catch(() => {
      //   this.loading = false
      //   this.$message.error('获取护士列表失败')
      // })
    }
  },
  mounted() {
    this.loadNurseTags()
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .search-container {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    .search-form {
      .el-form-item {
        margin-bottom: 15px;
        margin-right: 20px;
      }
    }
  }

  .operation-container {
    margin-bottom: 20px;
    text-align: right;
  }

  .operation-text {
    font-size: 14px;
  }

  .pagination-container {
    text-align: right;
    margin-top: 20px;
  }

  .el-table {
    .el-button--text {
      padding: 0;
      margin: 0 5px;
    }
  }

  .dialog-footer {
    text-align: right;
  }
}
</style>
